import { useState, useContext } from 'react'
import { Form, message, Modal } from 'antd'

import request from '@/utils/request'
import { useAppSelector } from '@/utils/hooks'
import { IForm } from '@/components'
import { FormItemConfig } from '@/components/FormItem'
import api from '@/utils/api'
import { Context } from '../index'

import type { RecordItem, Params } from '../type'
interface Props {
  visible: boolean
  record?: RecordItem
  onCancel: () => void
  doSearch: (params: Params) => void
}

const AddModal: React.FC<Props> = ({ visible, onCancel, doSearch }) => {
  const [app] = useAppSelector(state => [state.app])
  const [uploadData, setUploadData] = useState<{ code?: number; data?: string } | null>(null)
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const handleCancelClick = () => {
    Modal.confirm({
      title: '提示',
      content: `是否确认取消本次操作？取消后将需要重新编辑`,
      onOk() {
        handleCancel()
      },
    })
  }

  const handleOk = async () => {
    try {
      const values = await form.validateFields()
      const data = {
        ...values,
        id: uploadData?.data,
        entityId: app.currentEntity.entityId,
      }
      setLoading(true)
      request('userManageCommitFile', { data }).then(res => {
        if (res.code === 0) {
          message.success('操作成功')
          doSearch({} as Params)
          handleCancel()
        }
        setLoading(false)
      })
    } catch (error) {
      message.warn('有必填项未填！')
    }
  }

  const handleCancel = () => {
    form.resetFields()
    onCancel()
  }

  const formItemsConfig: FormItemConfig[] = [
		{
			type: "select",
			formItemProps: {
				label: "类型",
				rules: [{ required: true }],
				name: "type"
			},
			childProps: {
				options: [
					{ label: 1, value: "类型1" },
					{ label: 2, value: "类型2" }
				]
			}
		},
    {
      type: 'upload',
      formItemProps: {
        shouldUpdate: true,
        label: '文件',
        required: true,
      },
      children: [
        {
          type: 'download',
          childProps: {
            action: 'bikeManageGetFileTemplate',
            linkName: 'path',
            data: { optimizeType: form.getFieldsValue().optimizeType },
          },
        },
        {
          type: 'upload',
          formItemProps: {
            name: 'uploadFile',
            rules: [{ required: true, message: '请选择文件' }],
          },
          childProps: {
            fileType: 'excel',
            action: api.userManageUploadFile,
            data: { ...form.getFieldsValue() },
            onUploadSuccess: setUploadData,
          },
        },
      ],
    },
  ]

  return (
    <Modal
      title="更新用户"
      open={visible}
      width={660}
      onOk={handleOk}
      destroyOnClose
      maskClosable={false}
      onCancel={handleCancelClick}
      confirmLoading={loading}
    >
      <IForm layout="vertical" form={form} formItemsConfig={formItemsConfig}></IForm>
    </Modal>
  )
}

export default AddModal
